<template>
  <div class="base-flex" :class="cssClass" :style="style">
    <slot></slot>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { formatGapSize } from "@/utils/cssUtils";

const props = defineProps({
  justify: {
    type: [String, Boolean],
    default: "center",
  },
  align: {
    type: [String, Boolean],
    default: "center",
  },
  vertical: Boolean,
  inline: Boolean,
  gap: {
    type: [String, Boolean],
    default: "sm",
  },
});

const flexGap = computed(() => formatGapSize(props.gap));

const cssClass = computed(() => {
  return {
    "base-flex--inline": props.inline,
    "base-flex--vertical": props.vertical,
  };
});

const style = computed(() => {
  let justify = props.justify;

  if (["start", "end"].includes(justify)) {
    justify = `flex-${justify}`;
  } else if (["between", "around", "evenly"].includes(justify)) {
    justify = `space-${justify}`;
  }

  return {
    "justify-content": justify || false,
    "align-items": props.align,
  };
});
</script>

<style lang="scss" scoped>
.base-flex {
  display: flex;
  gap: v-bind(flexGap);

  &--inline {
    display: inline-flex;
  }
  &--vertical {
    flex-direction: column;
  }
}
</style>
